(() => {
  window.onload = () => {
    const profileInfo =JSON.parse(localStorage.getItem('chat-profile'))
    console.log(profileInfo)
    const user = {
      name: profileInfo.label,
      company: "柠檬云财税",
      tel: profileInfo.tel,
      headicon: profileInfo.value,
    };
    const leftUser = JSON.parse(localStorage.getItem("chat-object"));
    const tel = user.tel.slice(-4);
    const watermarkText = `${user.name}@${user.company}${tel}`;
    const waterMarkMargin = 120;
    const pContainer = document.querySelector(".cover");
    const chatWithNameEle = document.querySelector(".h-name");
    chatWithNameEle.textContent = leftUser.label;
    document.querySelectorAll(".chat-object-headicon").forEach((ele) => {
      ele.src = `./headicon/${leftUser.value}.jpg`;
    });
    document.querySelectorAll(".user-right>img").forEach((ele) => {
      ele.src = `./headicon/${user.headicon}.jpg`;
    });
    
    // 获取页面宽度和高度
    const screenWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    const screenHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;

    // 计算水印的行数和列数
    const rows = Math.floor(screenHeight / 50); // 调整行数
    const cols = Math.floor(screenWidth / 30); // 调整列数
    console.log(rows, cols);
    const spanList = [];
    for (let i = 0; i < cols; i++) {
      spanList.push(
        `<span style="margin-left:${waterMarkMargin}px">${watermarkText}</span>`
      );
    }
    // 动态生成水印元素
    for (let i = 0; i < rows; i++) {
      const watermark = document.createElement("div");
      watermark.classList.add("watermark");
      watermark.innerHTML = `
        <span>${watermarkText}</span>${spanList.join("")}
      `;
      // if (i % 2 !== 0) {
      //   watermark.style.paddingLeft = 80 + 'px'
      // }
      watermark.style.top = i * 80 + 120 + "px";
      watermark.style.left = 6 + "px";
      pContainer.appendChild(watermark);
    }
  };
})();
